<template>
  <div :class="type" class="message">
    <span>{{ message }}</span>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps<{
  message: string,
  type: 'success' | 'warning' | 'info' | 'error'
}>()
</script>

<style scoped>
.message {
  padding: 10px 20px;
  margin-bottom: 10px;
  border-radius: 4px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity .5s;
  font-size: 14px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  box-shadow: 0px 0.4px 2.2px rgba(0, 0, 0, 0.025),
  0px 1px 5.3px rgba(0, 0, 0, 0.036),
  0px 1.9px 10px rgba(0, 0, 0, 0.045),
  0px 3.4px 17.9px rgba(0, 0, 0, 0.054),
  0px 6.3px 33.4px rgba(0, 0, 0, 0.065),
  0px 15px 80px rgba(0, 0, 0, 0.09);
}

.message.success {
  background-color: #5c596c;
}

.message.warning {
  background-color: #e6a23c;
}

.message.info {
  background-color: #909399;
}

.message.error {
  background-color: #f56c6c;
}
</style>
